<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drag and Drop Text File</title>
    <style>
      #dropArea {
    
        width: 300px;
        height: 200px;
        border: 2px dashed #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        margin: 20px;
      }
      #text {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="dropArea">将文件拖到这里</div>
    <div id="text"></div>

    <script>
    
      const dropArea = document.getElementById("dropArea");
      const text = document.getElementById("text");
      dropArea.addEventListener("dragover", (e) => {
        e.preventDefault(); // 必须调用 preventDefault 以允许 drop 事件
        dropArea.style.backgroundColor = "#f0f0f0"; // 改变背景颜色以指示可放置
        dropArea.style.color = "#000"; // 改变文本颜色
      });
      dropArea.addEventListener("drop", function (e) {
        e.preventDefault();
        // e.dataTransfer.files: 这是一个 FileList 对象 获取 FileList 中第一个文件
        const file = e.dataTransfer.files[0];
        if (file && file.type === "text/plain") {
          // FileReader 是一个用于读取 File 或 Blob 对象的 JavaScript API
          const reader = new FileReader();
          // reader.onload是一个事件处理程序，当文件读取完成时触发
          reader.onload = (e) => {
            console.log(e.target.result);
            text.textContent = e.target.result; // 文件内容
          };
          // 读取文件内容
          reader.readAsText(file);
        } else {
          alert("请拖入文本文件");
        }
      });
    </script>
  </body>
</html>
